<template>
  <div @click="select" class="ChatPreItem">
    <div class="avatar">
      <n-image object-fit='cover' :preview-disabled="true" lazy
        :src="props.value.avatar ?? props?.value?.data?.avatar ?? props?.value?.definition?.avatar">
        <template #placeholder>
          <n-avatar>{{ props?.value?.definition?.name }}</n-avatar>
        </template>
      </n-image>
    </div>
    <div class="title">
      {{ props?.value?.data?.name ?? props?.value?.definition?.name }}
    </div>
    <div v-html="props?.value?.data?.description ?? props?.value?.definition?.description" class="content">
    </div>
    <div class="tags">
      <template v-for="tag in props?.value?.data?.tags.slice(0, 5) ?? props?.value?.topics.slice(0, 5)">
        <n-tag type='success'>{{ tag }}</n-tag>
      </template>
    </div>
  </div>
</template>

<script setup lang='ts'>
const props = defineProps<{
  value: any
}>()
const emits = defineEmits(['select'])
const select = () => {
  emits('select', props.value)
}
</script>

<style lang="scss" scoped>
.ChatPreItem {
  padding: 20px;
  height: 500px;
  border-radius: 10px;
  transition: box-shadow 0.5s ease-in-out;

  &:hover {
    box-shadow: 0 1px 2px -2px rgba(0, 0, 0, .08), 0 3px 6px 0 rgba(0, 0, 0, .06), 0 5px 12px 4px rgba(0, 0, 0, .04);
  }

  cursor: pointer;
  width: 250px;

  .tags {
    gap: 5px;
    display: flex;
    flex-wrap: wrap;
    margin-top: 12px;
  }

  .title {
    color: #80e1fc;
    text-align: center;
    margin-top: 10px;
  }

  .content {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .avatar {
    aspect-ratio: 1/1;

    .n-image {
      border-radius: 10px;
      width: 100%;
      height: 100%;

      img {
        width: 100%;
        height: 100%;
      }

      span {
        transform: unset;
        position: relative;
      }

      .n-avatar {
        width: 100%;
        height: 100%;
        font-size: 20px;
        border-radius: 10px;
      }
    }
  }
}
</style>